<html>

<head>
    <meta charset="utf-8">
    <title>新增投票活动</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/${BasePath}/static/css/headpic.css" media="all" />
    <link rel="stylesheet" href="/${BasePath}/static/layui/css/layui.css" media="all" type="text/css">
    <link rel="stylesheet" href="/${BasePath}/static/css/public.css" media="all" type="text/css"> 
</head>
<body class="childrenBody">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  <legend>新增投票活动</legend>
	</fieldset>
	    <input type="hidden" name="activitpicsmall" id="activitpicsmall" value="${activity.activitpic!'/${BasePath}/static/images/userface4.jpg'}">
		<input type="hidden" name="headpicsmall" id="headpicsmall" value="${activity.headpic!'/${BasePath}/static/images/userface4.jpg'}">
    <form id="activityForm" class="layui-form" lay-filter="example">
    <input type="hidden" name="id" id="id" value="${activity.id!'0'}">
    <input type="hidden" name="backmusic" id="backmusic" value="${activity.backmusic!'/${BasePath}/static/images/backmusic.mp3'}">
    <input type="hidden" name="headpic" id="headpic" value="${activity.headpic!'/${BasePath}/static/images/userface4.jpg'}">
    <input type="hidden" name="adpic" id="adpic" value="${activity.adpic!''}">
    <input type="hidden" name="activitpic" id="activitpic" value="${activity.activitpic!'/${BasePath}/static/images/userface4.jpg'}">
    <input type="hidden" name="prizepic" id="prizepic" value="${activity.prizepic!'/${BasePath}/static/images/userface4.jpg'}">
        <div class="layui-col-md6 layui-col-xs12">
            <div class="layui-form-item">
                <label class="layui-form-label">投票标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" value="${activity.title!''}" placeholder="请输入投票标题" class="layui-input"> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">背景音乐</label>
                <div class="layui-input-block">
                    <button id="upload" type="button" class="layui-btn">上传音乐</button> 
                    <input id="upfile" style="display: none" type="file" name="upfile"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">广告图</label>
                <div class="layui-input-block"> 
                    <a class="img" title="广告图" ><img id="upload2" class="shop-logo" alt="点击上传" src="${activity.adpic!'/${BasePath}/static/images/userface4.jpg'}"></a>
                    <input id="upfile2" style="display: none" type="file" name="upfile2"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">广告链接</label>
                <div class="layui-input-block">
                    <input type="text" name="adpicurl" value="${activity.adpicurl!''}" placeholder="请输入广告链接" class="layui-input"> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">可投票次数</label>
                <div class="layui-input-block">
                    <input type="text" name="times" lay-verify="required|number" value="5" readonly class="layui-input realName"> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">访问量</label>
                <div class="layui-input-block">
                    <input type="text" name="totalnum" lay-verify="required|number" value="${activity.totalnum!''}" class="layui-input"> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入开始时间" name="startTime" id="date1" lay-verify="required" value="${activity.startTime!''}" readonly class="layui-input userBirthday"> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入结束时间" name="endTime" id="date2" lay-verify="required" value="${activity.endTime!''}" readonly class="layui-input userBirthday"> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">顶端宣传图</label>
                <div class="layui-input-block">
                     <div style="position:relative">
                        <button type="button" class="layui-btn layui-btn-normal">选择图片</button>
                        <input id="up_head"  type="file"  style="position:absolute;top:0;left:0;bottom:0;opacity:0"> 
                    </div>
                    <div class="layui-upload-list" style="width:150px">
                        <img id="head_show" class="shop-logo" style="width:auto;max-width:100%;height:auto" alt="点击上传" src="${activity.headpic!'/${BasePath}/static/images/userface4.jpg'}">
                    </div>   
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">活动详情图</label>
                <div class="layui-input-block">
                    <div style="position:relative">
                        <button type="button" class="layui-btn layui-btn-normal">选择图片</button>
                        <input id="up_activity"  type="file"  style="position:absolute;top:0;left:0;bottom:0;opacity:0"> 
                    </div>
                    <div class="layui-upload-list" style="width:150px">
                        <img id="activity_show" class="shop-logo" style="width:auto;max-width:100%;height:auto" alt="点击上传" src="${activity.activitpic!'/${BasePath}/static/images/userface4.jpg'}">
                    </div>    
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">奖品图</label>
                <div class="layui-input-block"> 
                	<a class="img" title="奖品图" ><img id="upload5" class="shop-logo" alt="点击上传" src="${activity.prizepic!'/${BasePath}/static/images/userface4.jpg'}"></a>
                    <input id="upfile5" style="display: none" type="file" name="upfile5"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图片压缩倍数</label>
                <div class="layui-input-block">
                <#if activity.picsize ??>
                    <#if activity.picsize==1>
						<select name="picsize" class="layui-input"  >
							      <option value ="1" selected>1</option>
							      <option value ="11">1.25</option>
							      <option value ="12">1.66</option>
							      <option value ="2">2</option>
							      <option value ="3">3</option>
							</select>
						</#if>
						<#if activity.picsize==11>
							<select name="picsize" class="layui-input"  >
							      <option value ="1">1</option>
							      <option value ="11" selected>1.25</option>
							      <option value ="12">1.66</option>
							      <option value ="2">2</option>
							      <option value ="3">3</option>
							</select>
						</#if>
						<#if activity.picsize==12>
							<select name="picsize" class="layui-input"  >
							      <option value ="1">1</option>
							      <option value ="11">1.25</option>
							      <option value ="12" selected>1.66</option>
							      <option value ="2">2</option>
							      <option value ="3">3</option>
							</select>
						</#if>
						<#if activity.picsize==2>
							<select name="picsize" class="layui-input"  >
							      <option value ="1">1</option>
							      <option value ="11">1.25</option>
							      <option value ="12">1.66</option>
							      <option value ="2" selected>2</option>
							      <option value ="3">3</option>
							</select>
						</#if>
						<#if activity.picsize==3>
							<select name="picsize" class="layui-input"  >
							      <option value ="1">1</option>
							      <option value ="11">1.25</option>
							      <option value ="12">1.66</option>
							      <option value ="2">2</option>
							      <option value ="3" selected>3</option>
							</select>
						</#if>
                <#else>
					<select name="picsize" class="layui-input"  >
						      <option value ="1" selected>1</option>
						      <option value ="11">1.25</option>
						      <option value ="12">1.66</option>
						      <option value ="2">2</option>
						      <option value ="3">3</option>
						</select>
				</#if>
				</div>
            </div>
             <div class="layui-form-item ">
                <label class="layui-form-label">奖品</label>
                <div class="layui-input-block"> 
                    <#list giftlistall as giftall>
                	<div class="layui-inline selectitem" data-id="${giftall.id}">
                		<img alt="" class="shop-logo" src="${giftall.giftpic}">
                		<div class="money layui-form-item">
                			<div class="layui-inline">${giftall.price}元=${giftall.votenum}点</div>
                		</div>
                	</div>
                	</#list>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" type="button" lay-filter="form">立即提交</button>
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript" src="/${BasePath}/static/layui/layui.js" charset="utf-8" ></script>
    <script type="text/javascript" src="/${BasePath}/static/js/common/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="/${BasePath}/static/js/common/ajaxfileupload.js" charset="utf-8" ></script>
    <script type="text/javascript" src="/${BasePath}/static/js/common/popup.js"></script>
    <script type="text/javascript">
    var checked = '${giftlistcheck}';
    if(checked != ""){
    	var arr = checked.split(",");
    	$.each(arr,function(index,i){
    		$(".selectitem").each(function(){
    			if($(this).attr('data-id') == i){
    				$(this).addClass("active");
    			}
    		})
    	})
    }
    $(document).on('click','.selectitem',function(){
    	if($(this).hasClass('active')){
    		$(this).removeClass("active");
    	}
    	else{
    		$(this).addClass("active");
    	}
    })
    layui.use(['form', 'laydate','layer'], function() {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate;
        laydate.render({
            elem: '#date1'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#date2'
            ,type: 'datetime'
        });
        form.on('submit(form)', function() {
        	layer.msg('数据保存中', {
					icon:16,
					shade:[0.5,'#333'],
					time:false
			})
        	var arr = [];
        	$(".selectitem.active").each(function(){
        		arr.push($(this).attr("data-id"));
        	})
        	var str=arr.join(",");
        	var data = $('#activityForm').serialize();
                $.ajax({
                    type: "POST",
                    url: "/${BasePath}/activity/saveActivity?gift="+str,
                    data: data,
                    error: function(request) {
                        layer.msg('系统错误！');
                    },
                    success: function(data) {
                        if(data.code = "1") {
                            layer.msg(data.msg,{time:1000},function(){
                            	window.location.href="/${BasePath}/activity/activityList";
                            })
                        } else {
                            layer.msg(data.msg);
                        }
                    }
                });
            })
    });
    /* 上传背景音乐 */
    $("#upload").on('click', function() {
        $("#upfile").click();
    });
    $("#upfile").on("change", upfile);

    function upfile() {
        var fileSize = $("#upfile")[0].files[0].size;//文件的大小，单位为字节B
        if(fileSize > 10485760) {
            showTips('请上传大小小于10M的音乐');  
        }else{
            $.ajaxFileUpload({
                secureuri: false,
                url: "/${BasePath}/upload/springUpload",
                dataType: "json",
                fileElementId: 'upfile',
                success: function(data) { 
                	showTips('上传成功！',1500,1);
                    $("#upload").attr("src", data.path);
                    $("#backmusic").val(data.path);
                    $("#upfile").on("change", upfile);
                }
            });        	
        }
    }

    $("#up_head").on('change',function(){
        var filePath = $(this).val(),         //获取到input的value，里面是文件的路径
           fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
           imgBase64 = '',      //存储图片的imgBase64
           fileObj = this.files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象
           
       // 检查是否是图片
       if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
           layer.msg('上传错误,文件格式必须为：.png/.jpg/.jpeg');
           return;  
       }

       // 调用函数，对图片进行压缩
       compress(fileObj,function(imgBase64){
           imgBase64 = imgBase64;    //存储转换的base64编码
             $("#head_show").attr("src",imgBase64); 
             document.getElementById("headpic").value = imgBase64;
             document.getElementById("headpicsmall").value = imgBase64;
       });
    });

    $("#up_activity").on('change',function(){
        var filePath = $(this).val(),         //获取到input的value，里面是文件的路径
           fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
           imgBase64 = '',      //存储图片的imgBase64
           fileObj = this.files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象
           
       // 检查是否是图片
       if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
           layer.msg('上传错误,文件格式必须为：.png/.jpg/.jpeg');
           return;  
       }

       // 调用函数，对图片进行压缩
       compress(fileObj,function(imgBase64){
           imgBase64 = imgBase64;    //存储转换的base64编码
             $("#activity_show").attr("src",imgBase64); 
             document.getElementById("activitpic").value = imgBase64;
             document.getElementById("activitpicsmall").value = imgBase64;
       });
    });
       
    // 不对图片进行压缩，直接转成base64
   function directTurnIntoBase64(fileObj,callback){
       var r = new FileReader();
       // 转成base64
       r.onload = function(){
          //变成字符串
           imgBase64 = r.result;
           console.log(imgBase64);
           callback(imgBase64);
       }
       r.readAsDataURL(fileObj);    //转成Base64格式
   }

      // 对图片进行压缩
   function compress(fileObj, callback) { 
       if ( typeof (FileReader) === 'undefined') {  
           console.log("当前浏览器内核不支持base64图标压缩");  
           //调用上传方式不压缩  
           directTurnIntoBase64(fileObj,callback);
       }else if(fileObj.size<80000){      //图片小于250k就不压缩
         console.log("不需要压缩");  
           directTurnIntoBase64(fileObj,callback);
       } else {  
           try {    
               var reader = new FileReader();  
               reader.onload = function (e) {  
                   var image = $('<img/>');  
                   image.load(function(){  
                    var _canvas = document.createElement("canvas");
                    var w = this.width / 1.1;
                    var h = this.height / 1.1;
                    _canvas.setAttribute("width", w);
                    _canvas.setAttribute("height", h);
                    _canvas.getContext("2d").drawImage(this, 0, 0, w, h);
                    var data = _canvas.toDataURL("image/jpeg");
                
                       //压缩完成执行回调  
                        callback(data);  
                   });  
                   image.attr('src', e.target.result);  
               };  
               reader.readAsDataURL(fileObj);  
               }catch(e){  
                   console.log("压缩失败!");  
                   //调用直接上传方式  不压缩 
                   directTurnIntoBase64(fileObj,callback); 
               }  
            }
    }
    
    /* 上传广告图 */
    $("#upload2").on('click', function() {
        $("#upfile2").click();
    });
    $("#upfile2").on("change", upfile2);

    function upfile2() {
        var fileSize = $("#upfile2")[0].files[0].size;//文件的大小，单位为字节B
        if(fileSize > 10485760) {
            showTips('请上传大小小于10M的图片');  
        }else{
            $.ajaxFileUpload({
                secureuri: false,
                url: "/${BasePath}/upload/springUpload",
                dataType: "json",
                //fileElementId是img标签的id  
                fileElementId: 'upfile2',
                success: function(data) {
                	showTips('上传成功！',1500,1);
                    //上传成功后改变<img>标签的src地址，id参数其实不需要，主要是为了刷新img的图片资源。  
                    $("#upload2").attr("src", data.path);
                    $("#adpic").val(data.path);
                    //重新绑定事件，防止二次上传时失效  
                    $("#upfile2").on("change", upfile2);
                }
            });        	
        }
    }
    
    /* 上传顶端宣传图 */
    $("#upload3").on('click', function() {
        $("#upfile3").click();
    });
    $("#upfile3").on("change", upfile3);

    function upfile3() {
        var fileSize = $("#upfile3")[0].files[0].size;//文件的大小，单位为字节B
        if(fileSize > 10485760) {
            showTips('请上传大小小于10M的图片');  
        }else{
            $.ajaxFileUpload({
                secureuri: false,
                url: "/${BasePath}/upload/springUpload",
                dataType: "json",
                //fileElementId是img标签的id  
                fileElementId: 'upfile3',
                success: function(data) {
                	showTips('上传成功！',1500,1);
                    //上传成功后改变<img>标签的src地址，id参数其实不需要，主要是为了刷新img的图片资源。  
                    $("#upload3").attr("src", data.path);
                    $("#headpic").val(data.path);
                    //重新绑定事件，防止二次上传时失效  
                    $("#upfile3").on("change", upfile3);
                }
            });        	
        }
    }
    
    /* 上传活动详情图 */
    $("#upload4").on('click', function() {
        $("#upfile4").click();
    });
    $("#upfile4").on("change", upfile4);

    function upfile4() {
        var fileSize = $("#upfile4")[0].files[0].size;//文件的大小，单位为字节B
        if(fileSize > 10485760) {
            showTips('请上传大小小于10M的图片');  
        }else{
            $.ajaxFileUpload({
                secureuri: false,
                url: "/${BasePath}/upload/springUpload",
                dataType: "json",
                //fileElementId是img标签的id  
                fileElementId: 'upfile4',
                success: function(data) {
                	showTips('上传成功！',1500,1);
                    //上传成功后改变<img>标签的src地址，id参数其实不需要，主要是为了刷新img的图片资源。  
                    $("#upload4").attr("src", data.path);
                    $("#activitpic").val(data.path);
                    //重新绑定事件，防止二次上传时失效  
                    $("#upfile4").on("change", upfile4);
                }
            });        	
        }
    }
    
    /* 上传奖品图 */
    $("#upload5").on('click', function() {
        $("#upfile5").click();
    });
    $("#upfile5").on("change", upfile5);

    function upfile5() {
        var fileSize = $("#upfile5")[0].files[0].size;//文件的大小，单位为字节B
        if(fileSize > 10485760) {
            showTips('请上传大小小于10M的图片');  
        }else{
            $.ajaxFileUpload({
                secureuri: false,
                url: "/${BasePath}/upload/springUpload",
                dataType: "json",
                //fileElementId是img标签的id  
                fileElementId: 'upfile5',
                success: function(data) {
                	showTips('上传成功！',1500,1);
                    //上传成功后改变<img>标签的src地址，id参数其实不需要，主要是为了刷新img的图片资源。  
                    $("#upload5").attr("src", data.path);
                    $("#prizepic").val(data.path);
                    //重新绑定事件，防止二次上传时失效  
                    $("#upfile5").on("change", upfile5);
                }
            });        	
        }
    }
    </script>
</body>

</html>